import {designComponent, designPage, reactive, useRefs} from "@peryl/react-compose";
import {$message, Button, Form, FormDatePicker, FormInput, FormItem, FormSelect, i18n, Icon, Input, InputGroup, InputMode, InputNumber, PageCard, PageCardContent, PageCardTitle, Segment, SegmentGroup, Select, SelectOption, Tooltip, useStyle} from "plain-design";

export default designPage(() => {

  const { styleComputed } = useStyle();

  const list: {
    id: string,
    name: string,
    employeeNum: number,
    joinStartTime: string,
    joinEndTime: string,
    level: string,
    title: string,
    message: string,
    messageLevel: string,
    messageType: string,
    endDate: string,
  }[] = new Array(3).fill(1).map((_, index) => {
    return {
      id: `${index}`,
      name: `${i18n.$intl('page.groupFormPage.customer').d("客户")}_${index + 1}`,
      employeeNum: index + 1,
      joinStartTime: '2024-06-13',
      joinEndTime: '2024-06-14',
      level: 'dealer',
      title: i18n.$intl('page.groupFormPage.defaultTitle').d('确认提示'),
      message: i18n.$intl('page.groupFormPage.defaultMessage').d('更新客户信息？'),
      messageLevel: '',
      messageType: '',
      endDate: '',
    };
  });

  const state = reactive({
    list,
    columns: 3,
    verticalLabel: i18n.state.currentLang === 'en-us',
    inputMode: styleComputed.value.default.inputMode || InputMode.flat,
  });

  const levelOptions: { name: string, val: string }[] = [
    { name: i18n.$intl('page.groupFormPage.dealer').d('经销商'), val: 'dealer' },
    { name: i18n.$intl('page.groupFormPage.store').d('门店'), val: 'store' },
    { name: i18n.$intl('page.groupFormPage.region').d('区域'), val: 'region' },
    { name: i18n.$intl('page.groupFormPage.area').d('大区'), val: 'area' },
  ];

  const ItemCard = designComponent({
    props: {
      item: { type: Object, required: true },
    },
    setup({ props }) {
      const { refs, onRef } = useRefs({ form: Form });

      async function saveValidate() {
        await refs.form!.validate();
        $message.success(i18n.$intl('page.groupFormPage.validatePass').d('校验通过'));
      }

      return () => {
        const { item } = props;
        return (
          <PageCard collapsable>
            <PageCardTitle title={item.name} icon="pi-user">
              <Button label={i18n.$it('base.edit.save').d("保存")} mode="fill" onClick={saveValidate}/>
            </PageCardTitle>
            <PageCardContent>
              <Form singleColumnCenter={state.columns == 1} column={state.columns} modelValue={item} ref={onRef.form} verticalLabel={state.verticalLabel} inputMode={state.inputMode}>
                <FormInput label={i18n.$intl('page.groupFormPage.field.name').d("客户名称")} v-model={item.name} required/>
                <FormItem label={i18n.$intl('page.groupFormPage.field.employeeNum').d("客户员工数量")} field={'employeeNum'} required>
                  {{
                    default: () => <InputNumber v-model={item.employeeNum}/>,
                    append: () => <Tooltip message={i18n.$intl('page.groupFormPage.field.numberTip').d("整数")}><Icon icon="pi-info-circle-fill"/></Tooltip>
                  }}
                </FormItem>
                <FormItem label={i18n.$intl('page.groupFormPage.field.joinTime').d('客户加入时间')} field={'joinTime'}>
                  <InputGroup>
                    <Input v-model={item.joinStartTime}/>
                    <div>&nbsp;~&nbsp;</div>
                    <Input v-model={item.joinEndTime}/>
                  </InputGroup>
                </FormItem>
                <FormItem label={i18n.$intl('page.groupFormPage.field.level').d('客户级别')} field={'level'}>
                  <Select v-model={item.level}>
                    {levelOptions.map(item => <SelectOption label={item.name} val={item.val} key={item.val}/>)}
                  </Select>
                </FormItem>
                <FormInput label={i18n.$intl('page.groupFormPage.field.title').d("弹框标题")} v-model={item.title}/>
                <FormInput label={i18n.$intl('page.groupFormPage.field.message').d("弹框信息")} v-model={item.message}/>
                <FormSelect label={i18n.$intl('page.groupFormPage.field.messageLevel').d("消息级别")} v-model={item.messageLevel}/>
                <FormSelect label={i18n.$intl('page.groupFormPage.field.messageType').d("消息类型")} v-model={item.messageType}/>
                <FormDatePicker label={i18n.$intl('page.groupFormPage.field.endDate').d("截止日期")} v-model={item.endDate}/>
              </Form>
            </PageCardContent>
            <PageCardContent align="right">
              <span>{i18n.$intl('page.groupFormPage.footTips').d("底部额外信息")}</span>
            </PageCardContent>
          </PageCard>
        );
      };
    },
  });

  return () => (
    <>
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.groupFormPage.title').d("分组表单")}>
          <span>{i18n.$intl('page.groupFormPage.inputMode').d("输入框类型")}: </span>
          <SegmentGroup v-model={state.inputMode}>
            <Segment label={i18n.$intl('page.groupFormPage.inputModeOptions.flat').d("填充")} val="flat"/>
            <Segment label={i18n.$intl('page.groupFormPage.inputModeOptions.stroke').d("线性")} val="stroke"/>
            <Segment label={i18n.$intl('page.groupFormPage.inputModeOptions.text').d("文本")} val="text"/>
          </SegmentGroup>

          <span>{i18n.$intl('page.groupFormPage.labelDirection').d("文字方向")}: </span>
          <SegmentGroup v-model={state.verticalLabel}>
            <Segment label={i18n.$intl('page.groupFormPage.labelDirectionOptions.horizontal').d("横向")} val={false}/>
            <Segment label={i18n.$intl('page.groupFormPage.labelDirectionOptions.vertical').d("纵向")} val={true}/>
          </SegmentGroup>

          <span>{i18n.$intl('page.groupFormPage.columns').d("列数")}: </span>
          <SegmentGroup v-model={state.columns}>
            <Segment label={i18n.$intl('page.groupFormPage.columnOptions.0').d("一列")} val={1}/>
            <Segment label={i18n.$intl('page.groupFormPage.columnOptions.1').d("二列")} val={2}/>
            <Segment label={i18n.$intl('page.groupFormPage.columnOptions.2').d("三列")} val={3}/>
          </SegmentGroup>
        </PageCardTitle>
      </PageCard>
      {state.list.map(item => {
        return (
          <ItemCard item={item} key={item.id}/>
        );
      })}
    </>
  );
});
